main.css

#calender{
   margin: 0 auto;
   width: 90%;
}

.day, .date-block{
   float: left;
   width: calc(100%/7);
}

#dates{
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
}

.date-block{
   border-top: 1px solid #ccc;
   border-left: 1px solid #ccc;
   height: 15vh;
}

--vh、vw在使用上與百分比%很相似，vh代表view height，指的是螢幕可視範圍高度的百分比，而vw則代表view width，是指螢幕可視範圍寬度的百分比。
vmin：寬度或高度較小值的百分比
vmax：寬度或高度較大值的百分比

index.php

<div id="dates" class="clearfix">
        <?php foreach($dates as $key => $date): ?>
            <div class="date-block <?= (is_null($date))? 'empty': ' ' ?>">
                <div class="date"><?= $date ?></div>
                <div class="events">
        
                </div>
            </div>
        <?php endforeach ?>
</div>

--">
--這裡的意思是，$date如果空的話，成立一個empty的class

main.css

.date-block.empty{
   background-color: #eee;
}

#header{
   font-size: 2.4rem;
   font-weight: bold;
}